<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blog-single</title>
    <link rel="stylesheet" type="text/css" href="bootstrap-4.5.0/dist/css/bootstrap.css"/>
    <!-- jQuery文件 -->
    <script src="JS/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <!-- Bootstrap插件依赖文件 -->
    <script src="bootstrap-4.5.0/dist/js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
    <!-- jQuery插件 -->
    <script src="bootstrap-4.5.0/dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <!-- 加载font awesome图标库 -->
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css"/>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <script src="bootstrap-4.5.0/dist/js/bootstrap.min.js"></script>
    <link href="css/blog-single.css" rel="stylesheet" type="text/css">
    <link href="owl.carousel/owl.carousel.css" rel="stylesheet">
    <link href="owl.carousel/owl.theme.css" rel="stylesheet">
    <script src="JS/jquery-3.2.1.js"></script>
    <script src="owl.carousel/owl.carousel.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-12 col-md-8 text-left text-center ">
            <i class="fa fa-user"></i>　
            <a href="#">Login</a>　
            <i class="fa fa-pencil"></i>　
            <a href="#">Register</a>　
            <i class="fa fa-cart-plus"></i>　
            <a href="#">Checkout</a>　
        </div>
        <div class="col-12 col-md-4 text-right text-center">
            <i class="fa fa-heart"></i>　
            <a href="#">Wishlist</a>　
            <i class="fa fa-angle-down"></i>　
            <a href="#">USD</a>　
        </div>
    </div>
</div>
<div class="tu m-0 p-0">
    <div class="jumbotron jumbotron-fluid text-white d-flex align-items-center m-0 p-0">
        <div class="container">
            <div class="container kuai">
                <div class="row">
                    <div class="col-12 col-md-auto text-center">
                        <img src="images/logo.png">
                    </div>
                    <div class="col-12  col-md-4 ml-auto  form-group ">
                        <input class="form-control" type="text" placeholder="search... ">
                        <button class="btn an_niu">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<nav class="navbar navbar-expand-lg navbar-light pt-0 pb-0">
    <a class="navbar-brand " href="#"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-lg-center" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item ml-lg-auto">
                <a class="nav-link p-3" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="services.html">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="#">Gallery</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="#">Bolg</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="#">Shop</a>
            </li>
            <li class="nav-item mr-lg-auto">
                <a class="nav-link p-3" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>
<div class="container-fluid">
    <div class="container-fluid baijing text-center col-12">
        <div class="bai_jing_tu">
            <h1>Blog Single</h1>
            <p>————————————————</p>
            <p>————————</p>
            <h5>Home<span class="yang_se_go_yon"> / Blog Single</span></h5>
        </div>
    </div>
</div>
<div class="container mt-5">
    <div class="row">
        <div class="col-12 col-md-8">
            <div class="card ">
                <div class="tu2">
                    <img src="images/blog_single.jpg " class="img3">
                </div>
                <div class="card-body">
                    <h5 class="go_yon">IIlluminated Accessories</h5>
                    <i class="fa fa-user tu_biao"></i>
                    <a class="zi">Admin</a>
                    <i class="fa fa-calendar tu_biao"></i>
                    <a class="zi">12 June 2018</a>
                    <i class="fa fa-tags tu_biao"></i>
                    <a class="zi">Picture</a>
                    <p>
                        Pleasure and praising pain was born and will give you
                        a complete account of the systems, and expound the actual teaching.
                    </p>

                    <p>
                        Collective terms for handicrafts include artisanry, handicrafting, crafting,
                        and handicraftsmanship. The term arts and crafts is also applied, especially
                        in the United States and mostly to hobbyists' and children's output rather than
                        items crafted for daily use, but this distinction is not formal, and the term is
                        easily confused with the Arts and Crafts design movement, which is in fact as
                        practical as it is aesthetic
                    </p>

                    <p>
                        These activities were called crafts because originally many of them were professions
                        under the guild system. Adolescents were apprenticed to a master craftsman, and refined
                        their skills over a period of years in exchange for low wages. By the time their
                        training was complete,they were well equipped to set up in trade for themselves,
                        earning their living with the skill that could be traded directly within the community,
                        often for goods and services.
                    </p>
                    <div class="row">
                        <div class="zuo ">
                            <p>Tags:
                                <span>
                                        <button type="button" class="an_niu3 btn btn-danger" data-toggle="">Decoration</button>
                                    </span>
                                <span>
                                        <button type="button" class="an_niu3 btn btn-danger" data-toggle="">Household</button>
                                    </span>
                                <span>
                                        <button type="button" class="an_niu3 btn btn-danger" data-toggle="">Stuff</button>
                                    </span>
                            </p>
                        </div>
                        <div class="you">
                            <p class="zi2">
                                <span class="zi3">Share</span>
                                <span class="ml-4">
                                        <a href="#"><i class="fa fa-facebook tu_biao" aria-hidden="true"></i></a>
                                    </span>
                                <span class="ml-2">
                                        <a href="#"><i class="fa fa-twitter tu_biao" aria-hidden="true"></i></a>
                                    </span>
                                <span class="ml-2">
                                        <a href="#"><i class="fa fa-linkedin tu_biao" aria-hidden="true"></i></a>
                                    </span>
                                <span class="ml-2">
                                        <a href="#"><i class="fa fa-vimeo tu_biao" aria-hidden="true"></i></a>
                                    </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <h4 class="py-3">COMMENTS(2)</h4>
                <div class="media">
                    <img src="images/author-1.jpg" class="mr-3">
                    <div class="media-body mr-0">
                        <h6 class="mt-0">MattPhillips
                            <span class="mei_ti"><a class="fa fa-mail-reply-all"> Reply</a></span>
                        </h6>
                        <p class="tu_biao">june 7, 2018</p>
                        There are many variations of passages of Lorem Ipsum available, but the majority
                        have suffered
                        alteration in some form, by injected humour, or randomised words
                        which don't look even slightly believable.
                        <div class="media mt-3">
                            <img src="images/author-2.jpg" class="mr-3">
                            <div class="media-body">
                                <h6 class="mt-0">MattPhillips
                                    <span class="mei_ti"><a class="fa fa-mail-reply-all"> Reply</a></span>
                                </h6>
                                <p class="tu_biao">june 7, 2018</p>
                                <div class="text"> There are many variations of passages of Lorem Ipsum available, but the majority
                                    have suffered alteration in some form, by injected humour, or randomised words
                                    which don't look even slightly believable.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container mt-3">
                <h4>LEAVE A REPLY</h4>
                <div class="row">
                    <div class="form-group col-12 col-md-6">
                        <input type="text" class="form-control form-control-lg" placeholder="Name">
                    </div>
                    <div class="form-group col-12 col-md-6">
                        <input type="text" class="form-control form-control-lg" placeholder="Email">
                    </div>

                </div>
                <div class="form-group">
                    <input type="text" class="form-control form-control-lg" placeholder="Subject">
                </div>
                <div class="form-group">
                    <textarea type="text" class="form-control form-control-lg" rows="6" placeholder="Comment"></textarea>
                </div>
                <button type="submit" class="btn btn-danger an_niu2">POST COMMENT</button>
            </div>
        </div>
        <div class="col-3 col-md-4">
            <div class="container">
                <div class="input-group mt-3 mt-md-0">
                    <div class="input-group-prepend">
                        <input type="text" placeholder="Search" class="kuan">
                        <button class="input-group-text shou">
                            <i class="fa icon fa fa-search"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="container">
                <h4 class="mt-5 tu_biao">RECENT POST</h4>
                <p class="tu_biao">———</p>
                <div class="da_div">
                    <div class="shang">
                        <div class="zuo">
                            <img src="images/sidebar-post-1.jpg">
                        </div>
                        <div class="you">
                            <b>Healthy Benefits Of Raw Food And Healthy Diet</b>
                            <p class="tu_biao">Dec 30, 2016</p>
                        </div>
                    </div>
                    <div class="xia">
                        <div class="zuo">
                            <img src="images/sidebar-post-2.jpg">
                        </div>
                        <div class="you">
                            <b>Healthy Benefits Of Raw Food And Healthy Diet</b>
                            <p class="tu_biao">Jan 01, 2018</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container py-3 biao_hui">
                <h4>BLOG GATEGORIES</h4>
                <p class="tu_biao">———</p>
                <div class="row">
                    <div class="col-6 py-2">
                        Funky Jewelry
                    </div>
                    <div class="col-6 tu_biao text-right py-2">
                        10
                    </div>
                    <div class="col-6 py-2">
                        Knitted Hats
                    </div>
                    <div class="col-6 tu_biao text-right py-2">
                        35
                    </div>
                    <div class="col-6 py-2">
                        Homemade Soap
                    </div>
                    <div class="col-6 tu_biao text-right py-2">
                        40
                    </div>
                    <div class="col-6 py-2">
                        Birthday Cards
                    </div>
                    <div class="col-6 tu_biao text-right py-2">
                        10
                    </div>
                    <div class="col-6 py-2">
                        Tank Tops
                    </div>
                    <div class="col-6 tu_biao text-right py-2">
                        8
                    </div>
                </div>
            </div>
            <div class="container">
                <h4>INSTAGRAM</h4>
                <p class="tu_biao">———</p>
                <div class="fff">
                    <ul>
                        <li><img src="images/insta1.jpg"></li>
                        <li><img src="images/insta2.jpg"></li>
                        <li><img src="images/insta3.jpg"></li>
                        <li><img src="images/insta4.jpg"></li>
                        <li><img src="images/insta5.jpg"></li>
                        <li><img src="images/insta6.jpg"></li>
                        <li><img src="images/insta7.jpg"></li>
                        <li><img src="images/insta8.jpg"></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <div class="container mt-3">
                <h4>PRODUCT TAGS</h4>
                <p class="tu_biao">———</p>
                <div class="an_niu5">
                    <ul>
                        <li>
                            <button class="btn btn-danger">Craft</button>
                        </li>
                        <li>
                            <button class="btn btn-danger">Decoration</button>
                        </li>
                        <li>
                            <button class="btn btn-danger">Diy</button>
                        </li>
                        <li>
                            <button class="btn btn-danger">Fashion</button>
                        </li>
                        <li>
                            <button class="btn btn-danger">Lifestyle</button>
                        </li>
                        <li>
                            <button class="btn btn-danger">General</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid feng_se mt-3 col-12">
    <h3 class="py-5 text-center text-white">Our Clients</h3>
    <div class="container">
        <div id="owl-demo" class="owl-carousel py-3">
            <a class="item"><img src="images/partner1.png" alt=""></a>
            <a class="item"><img src="images/partner2.png" alt=""></a>
            <a class="item"><img src="images/partner3.png" alt=""></a>
            <a class="item"><img src="images/partner4.png" alt=""></a>
            <a class="item"><img src="images/partner5.png" alt=""></a>
            <a class="item"><img src="images/partner1.png" alt=""></a>
            <a class="item"><img src="images/partner2.png" alt=""></a>
            <a class="item"><img src="images/partner3.png" alt=""></a>
            <a class="item"><img src="images/partner4.png" alt=""></a>
            <a class="item"><img src="images/partner5.png" alt=""></a>
            <a class="item"><img src="images/partner1.png" alt=""></a>
            <a class="item"><img src="images/partner2.png" alt=""></a>
            <a class="item"><img src="images/partner3.png" alt=""></a>
            <a class="item"><img src="images/partner4.png" alt=""></a>
            <a class="item"><img src="images/partner5.png" alt=""></a>
        </div>
    </div>
</div>
<div class="da_div2 yang_se5">
    <div class="container">
        <div class="row py-5">
            <div class="col-12 col-md-6 col-lg-3">
                <img src="images/logo.png">
                <p class="zi6">It is a long established fact that a reader will be distracted by the readable
                    content of a page when looking at its layout.</p>
            </div>

            <div class="col-12 col-md-6 col-lg-3">
                <h5 class="zi2">Help</h5>
                <p class="zi6">Find Your Beer</p>
                <p class="zi6">Customer Service</p>
                <p class="zi6">Contact</p>
                <p class="zi6">Recent Orders</p>
            </div>

            <div class="col-12 col-md-6 col-lg-3">
                <h5 class="zi2">Links</h5>
                <p class="zi6">Home</p>
                <p class="zi6">Shop</p>
                <p class="zi6">404 Page</p>
                <p class="zi6">Login</p>
            </div>

            <div class="col-12 col-md-6 col-lg-3">
                <h5 class="zi2">Our Information</h5>
                <p class="zi6">787 Lakeview St. Marion, NC 28752 </p>
                <p class="zi6">+1800123654789 </p>
                <p class="zi6">+1800123456788 </p>
                <p class="zi6">Support@Handmade.Net</p>
            </div>
        </div>
    </div>
</div>
<div class="zui_ho feng2">
    <div class="row">
        <div class="col-12 col-md-6 text-center ">
            <p class="zi6">Copyrights © 2018 All Rights <span class="text-primary">Reserved</span> by Himanshusofttech</p>
        </div>
        <div class="col-12 col-md-6 text-right zui2 text-center zi6">
            <a href="#" class="zi6"><i class="fa fa-facebook"></i></a>
            <a href="#" class="zi6"><i class="fa fa-twitter mr-2"></i></a>
            <a href="#" class="zi6"><i class="fa fa-google-plus mr-2"></i></a>
            <a href="#" class="zi6"><i class="fa fa-pinterest-p mr-2"></i></a>
            <a href="#" class="zi6"><i class="fa fa-linkedin mr-2"></i></a>
        </div>
    </div>
</div>
<script>
    $(function(){
        $('#owl-demo').owlCarousel({
            item:2,
            autoPlay:1000,
            navigation:false,
            pagination: false,
            itemsDesktop:false,
            itemsDesktopSmall: false,
            itemsTablet: [580,1],
            itemsTabletSmall: false,
            itemsMobile: false
        });
    });


    window.onscroll = function (event) {
        var shang = document.documentElement.scrollTop
        var oDiv = document.getElementsByClassName("navbar-nav")[0];

        if (shang > 300){
            oDiv.style.position = "fixed";
            oDiv.style.top = "0px"
        }
        else{
            oDiv.style.position = "relative";
            oDiv.style.top = "";
        }
    }


</script>
</body>
</html>